<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div>
        <!-- 文件选择输入框，用于选择视频文件 -->
        <input type="file"/>


    </div>
  


    <script>

        // 获取文件输入元素
        const ipt = document.querySelector('input');
        
        
        // 当用户选择文件时触发的事件处理函数
        ipt.onchange=  (e)=>{

            // 获取用户选择的第一个文件（视频文件）
            const file = e.target.files[0];
            
            // 循环11次，从视频中提取11个帧（0秒、1秒、2秒...10秒）
            for (let i = 0; i <= 10; i++){
                // 调用captureFrame函数在指定时间点截取视频帧，并获取结果
                captureFrame(file,i*1).then((result)=>{
               getImage(result.src);
            });
                console.log('截取图片：'+(i+1));
            }
            
        

        }

        /**
         * 在指定时间点捕获视频帧的函数
         * @param {File} e - 视频文件
         * @param {Number} time - 要捕获帧的时间点（秒）
         * @returns {Promise} - 返回包含图像blob和URL的Promise
         */
        function captureFrame(e,time){
          return new Promise((resolve,reject)=>{
            // 创建video元素用于加载视频
            const video = document.createElement('video');  
            // 设置视频播放时间点
            video.currentTime = time;
            video.autoplay = true; // 自动播放 
            video.muted = true; // 静音
            // 为视频元素设置源文件
            video.src = URL.createObjectURL(e);
            
            // 当视频可以播放时触发的事件
            video.oncanplay = ()=>{
                // 创建canvas元素用于绘制视频帧
                const canvas = document.createElement('canvas');
                
                // 设置canvas尺寸为视频尺寸乘以设备像素比，以获得更清晰的图像
                canvas.width = video.videoWidth*devicePixelRatio;
                canvas.height = video.videoHeight*devicePixelRatio;
                
                // 获取2D绘图上下文
                const ctx = canvas.getContext('2d');
                
                // 将当前视频帧绘制到canvas上
                ctx.drawImage(video,0,0,canvas.width,canvas.height);
                
                // 将canvas内容转换为blob对象
                canvas.toBlob((blob)=>{
                    // 创建图像URL
                    const src = URL.createObjectURL(blob);
                    resolve({
                        blob,
                        src
                    });
                })

               
 
            }
          })
        }

        /**
         * 创建并显示图像的函数
         * @param {String} url - 图像的URL
         */
        function getImage(url){
            // 创建img元素
            const img =  document.createElement('img');
            // 设置图像源
            img.src = url;
            // 设置图像尺寸
            img.width = 300;
            img.height = 150;
            // 将图像添加到页面body中显示
            document.body.appendChild(img);
        }
        /**
         * 截取视频帧
         * 基本实现逻辑
         * 1. 先创建video元素
         * 2.指定video播放时间点
         * 3.使用canvas绘制视频帧
         * 4. 获取canvas元素
         * 5. 获取canvas元素中的图片
         * 6. 获取图片的url
         * 7. 获取图片的blob
         */
    </script>
</body>
</html>